/**
 * Created by zhangligang
 * Email: tzhang2450@163.com
 * Date: 2019/1/19
 * Time: 23:41
 */
$(function () {

    sendAjax('/v1/manager/data/users.json', 'get', {}, function (json) {
        var data = [{
            day: '2018-12-11',
            sales: 5
        }, {
            day: '2018-12-12',
            sales: 6
        }, {
            day: '2018-12-13',
            sales: 3
        }, {
            day: '2018-12-14',
            sales:5
        }, {
            day: '2018-12-15',
            sales: 8
        }, {
            day: '2018-12-16',
            sales:6
        }, {
            day: '2018-12-17',
            sales: 6
        }, {
            day: '2018-12-18',
            sales: 3
        }, {
            day: '2018-12-19',
            sales: 8
        }, {
            day: '2018-12-20',
            sales: 4
        }, {
            day: '2018-12-21',
            sales: 3
        }, {
            day: '2018-12-22',
            sales: 3
        }, {
            day: '2018-12-23',
            sales: 9
        }, {
            day: '2018-12-24',
            sales: 6
        }, {
            day: '2018-12-25',
            sales: 4
        }, {
            day: '2018-12-26',
            sales: 3
        }, {
            day: '2018-12-27',
            sales: 6
        }
        ];
        var chart = new G2.Chart({
            id: 'statistics',
            forceFit: true,
            height: 40,
            padding: [ 0 ,10 ,0 ,5]
        });
        chart.source(data);
        // chart.scale( {tickInterval: 1});
        chart.axis('xField', {
            title: null,
            grid: {
                lineStyle: {
                    stroke: 'transparent'
                }
            }
        });

        chart.tooltip({
            offset: 2,
            showTitle: false,
            itemTpl: '<li>{day}  {sales}</li>'
        })
        // chart.area().position('year*value').color('type').shape('smooth');
        chart.area().position('day*sales')
            .color("#975fe4")
            .shape('smooth')
            .tooltip('day*sales', (day,sales) => {
                return {
                    day: day,
                    sales: sales
                };
            });

        chart.render();
    });

    sendAjax('/v1/manager/data/users.json', 'get', {}, function (json) {
        var data = [{
            day: '2018-12-11',
            sales: 2
        }, {
            day: '2018-12-12',
            sales: 6
        }, {
            day: '2018-12-13',
            sales: 3
        }, {
            day: '2018-12-14',
            sales:5
        }, {
            day: '2018-12-15',
            sales: 8
        }, {
            day: '2018-12-16',
            sales: 2
        }, {
            day: '2018-12-17',
            sales: 6
        }, {
            day: '2018-12-18',
            sales: 3
        }, {
            day: '2018-12-19',
            sales: 8
        }, {
            day: '2018-12-20',
            sales: 4
        }, {
            day: '2018-12-21',
            sales: 3
        }, {
            day: '2018-12-22',
            sales: 3
        }, {
            day: '2018-12-23',
            sales: 9
        }, {
            day: '2018-12-24',
            sales: 6
        }, {
            day: '2018-12-25',
            sales: 4
        }, {
            day: '2018-12-26',
            sales: 3
        }, {
            day: '2018-12-27',
            sales: 6
        }
        ];
        var chart = new G2.Chart({
            id: 'user-count',
            forceFit: true,
            height: 40,
            padding: [ 0 ,10 ,0 ,5]
        });
        chart.source(data);
        chart.scale( {
            tickInterval: 20});
        chart.axis('xField', {
            title: null,
            alias: '',
            grid: {
                type: 'line',
                label: null,
                lineStyle: {
                    stroke: 'transparent',
                    lineWidth: 1,
                    lineDash: [ 4, 4 ]
                },
                align: 'center' // 网格顶点从两个刻度中间开始
            }
        });

        chart.tooltip({
            offset: 2,
            showTitle: false,
            itemTpl: '<li>{day}  {sales}</li>'
        })
        chart.interval().position('day*sales')
            .tooltip('day*sales', (day,sales) => {
                return {
                    day: day,
                    sales: sales
                };
            });

        chart.render();
    });

    sendAjax('/v1/manager/data/users.json', 'get', {}, function (json) {
        var heightCtrl2 = $(".g2_HeightCtrl").height();
        /*alert()*/
        var data = [{
            month: '1月',
            sales: 210
        }, {
            month: '2月',
            sales: 520
        }, {
            month: '3月',
            sales: 611
        }, {
            month: '4月',
            sales: 145
        }, {
            month: '5月',
            sales: 483
        }, {
            month: '6月',
            sales: 380
        }, {
            month: '7月',
            sales: 380
        }, {
            month: '8月',
            sales: 38
        }, {
            month: '9月',
            sales: 318
        }, {
            month: '10月',
            sales: 338
        }, {
            month: '11月',
            sales: 338
        }, {
            month: '12月',
            sales: 838
        }
        ];
        var chart = new G2.Chart({
            id: 'score-list',
            forceFit: true,
            height: 400,
            padding: [ 15, 15,40, 40 ]
        });
        chart.source(data);
        chart.scale( {
            tickInterval: 200
        });

        chart.tooltip({
            showTitle: false,
            itemTpl: '<li>{month} - {sales}</li>'
        })
        chart.interval()
            .position('month*sales')
            .tooltip('month*sales', (month, sales) => {
                return {
                    month: month,
                    sales: sales
                };
            });
        chart.render();
    });

    sendAjax('/v1/manager/data/users.json', 'get', {}, function (json) {

    });

    sendAjax('/v1/manager/data/users.json', 'get', {}, function (json) {
        var data = [{
            day: '2018-12-11',
            sales: 5
        }, {
            day: '2018-12-12',
            sales: 6
        }, {
            day: '2018-12-13',
            sales: 7
        }, {
            day: '2018-12-14',
            sales:5
        }, {
            day: '2018-12-15',
            sales: 8
        }, {
            day: '2018-12-16',
            sales:6
        }, {
            day: '2018-12-17',
            sales: 6
        }, {
            day: '2018-12-18',
            sales: 5
        }, {
            day: '2018-12-19',
            sales: 8
        }, {
            day: '2018-12-20',
            sales: 6
        }, {
            day: '2018-12-21',
            sales: 7
        }, {
            day: '2018-12-22',
            sales: 5
        }, {
            day: '2018-12-23',
            sales: 9
        }, {
            day: '2018-12-24',
            sales: 6
        }, {
            day: '2018-12-25',
            sales: 6
        }, {
            day: '2018-12-26',
            sales: 4
        }, {
            day: '2018-12-27',
            sales: 6
        }
        ];
        var chart = new G2.Chart({
            id: 'user-star-count',
            forceFit: true,
            height: 87,
            padding: [ 0 ,10 ,0 ,5]
        });
        chart.source(data);
        // chart.scale( {tickInterval: 1});
        chart.axis('xField', {
            title: null,
            grid: {
                lineStyle: {
                    stroke: 'transparent'
                }
            }
        });

        chart.tooltip({
            offset: 2,
            showTitle: false,
            itemTpl: '<li>{day}  {sales}</li>'
        })
        // chart.area().position('year*value').color('type').shape('smooth');
        chart.area().position('day*sales')
            .color("#3aa1ff")
            .shape('smooth')
            .tooltip('day*sales', (day,sales) => {
                return {
                    day: day,
                    sales: sales
                };
            });
        chart.line().position('day*sales').color('#3aa1ff').size(2).shape('smooth');
        chart.render();
    });

    sendAjax('/v1/manager/data/users.json', 'get', {}, function (json) {
        var data = [{
            day: '2018-12-11',
            sales: 5
        }, {
            day: '2018-12-12',
            sales: 6
        }, {
            day: '2018-12-13',
            sales: 7
        }, {
            day: '2018-12-14',
            sales:5
        }, {
            day: '2018-12-15',
            sales: 8
        }, {
            day: '2018-12-16',
            sales:6
        }, {
            day: '2018-12-17',
            sales: 6
        }, {
            day: '2018-12-18',
            sales: 5
        }, {
            day: '2018-12-19',
            sales: 8
        }, {
            day: '2018-12-20',
            sales: 6
        }, {
            day: '2018-12-21',
            sales: 7
        }, {
            day: '2018-12-22',
            sales: 5
        }, {
            day: '2018-12-23',
            sales: 9
        }, {
            day: '2018-12-24',
            sales: 6
        }, {
            day: '2018-12-25',
            sales: 6
        }, {
            day: '2018-12-26',
            sales: 4
        }, {
            day: '2018-12-27',
            sales: 6
        }
        ];
        var chart = new G2.Chart({
            id: 'department-star-count',
            forceFit: true,
            height: 87,
            padding: [ 0 ,10 ,0 ,5]
        });
        chart.source(data);
        chart.scale( {tickInterval: 1});
        chart.axis('xField', {
            title: null,
            grid: {
                lineStyle: {
                    stroke: 'transparent'
                }
            }
        });

        chart.tooltip({
            offset: 2,
            showTitle: false,
            itemTpl: '<li>{day}  {sales}</li>'
        })
        chart.area().position('day*sales')
            .color("#3aa1ff")
            .shape('smooth')
            .tooltip('day*sales', (day,sales) => {
                return {
                    day: day,
                    sales: sales
                };
            });
        chart.line().position('day*sales').color('#3aa1ff').size(2).shape('smooth');
        chart.render();
    });

    sendAjax('/v1/manager/data/users.json', 'get', {}, function (json) {
        var total = json.body.total;
        var data = json.body.list;
        var chart = new G2.Chart({
            container: 'user-analysis',
            width: 220,
            height: 220,
            padding:[0],
            animate: false
        });
        chart.source(data, {
            percent: {
                formatter: function formatter(val) {
                    return val * 100 + '%';
                }
            }
        });

        var ds = new DataSet();
        var dv = ds.createView().source(data);

        chart.coord('theta', {

            innerRadius: 0.75
        });
        chart.tooltip({
            showTitle: false,
            itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
        });
        //图例
        chart.legend({
            useHtml: true,
            position: 'right',
            float: 'right',
            containerTpl: '<div class="g2-legend" style="left: 245px;top: 35px;">' +
                '<div class="g2-legend-list clearfix" style="list-style-type:none;margin:0;padding:0;"></div>' +
                '</div>',
            itemTpl: (value, color, checked, index) => {
                //
                var num = dv.rows[index].num;
                checked = checked ? 'checked' : 'unChecked';
                return '<div class="g2-legend-list-item item-' + index + ' ' + checked +
                    '" data-value="' + value + '" data-color=' + color +
                    ' style="cursor: pointer;font-size: 14px;">' +
                    '<span style="border: none;padding:0;"><i class="g2-legend-marker" style="width:5px;height:5px;display:inline-block;margin-right:15px;background-color:' + color + ';"></i>' +
                    '<span class="g2-legend-text">' + value + '</span><span class="line"></span></span>' +
                    '<span style="text-align: right;border: none;padding:0;">' + num + '人</span>' +
                    '</div>';
            }
        });


        // 辅助文

        chart.guide().html({
            position: ['50%', '50%'],
            html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;"> <div class="title">党员总人数</div><span style="color:#595959;font-size:20px">'+total+'</span></div>',
            alignX: 'middle',
            alignY: 'middle'
        });

        chart.intervalStack()
            .position('percent')
            .color('item',[ '#1890ff', '#f04864', '#4ecb73', '#facc14', '#13c2c2'])
            .tooltip('item*percent', function(item, percent) {
                percent = percent * 100 + '%';
                return {
                    name: item,
                    value: percent
                };
            }).style({
                lineWidth: 4,
                stroke: '#fff'
            });

        chart.render();
    });

});